<template>
  <div class="table-t">
     <div class="box-body ">

                        <table class="table table-striped">
                            <tbody>
                            <tr>
                                <th style="width: 30%">内容</th>
                                <th >回复至</th>
                                <th style="width: 240px">发布时间</th>
                                <th style="width: 150px">操作</th>
                            </tr>
                            <tr class="jp-actiontr animate__animated animate__bounce" v-for="(item,index) in commentData" :key="index">
                                <td>
                                    <strong style="    font-size: 15px;" v-html="item.commentContent"> 
                                      
                                    </strong>
                                   
                                </td>
                                <td>
                                    <router-link :to="'/aab/'+item.artId">
                                        {{item.articleTitle}}
                                    </router-link>
                                </td>
                                <td>{{item.commentTime}}</td>
                                <td>
                                   <div class="jp-actionblock">
                                        <div class="jp-actionitem" style="display: block;">
                                            <span @click="toCommentEditor(item)">编辑</span> |
                                            <span  @click="doDelComment(item.commId,item.artId,item.userId)" class="red-action">永久删除</span>
                                        </div>
                                    </div>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
  </div>
</template>

<script>
import pubsub from "pubsub-js"
import axios from "axios"
export default {
    name:"Table",
    data() {
      return {
        commentData:[]
      }
    },
    mounted(){
      
      pubsub.subscribe("commentDatas",(item,data)=>{
        this.commentData = data
      })
    },
    methods:{
      toCommentEditor(item){
        this.$router.push({
          name:"CommentEditor",
          params:{
            commdata:item
          }
        })
      },
      doDelComment(commId,artId,userId){
        const that = this;
        axios({
          method:"post",
          url:"/aabbcc/userArticleComment/deleteComment/"+commId+"/"+artId+"/"+55
        }).then(function(res){
          if(res.data.code == 200){
              that.open2("删除成功")
            }else if(res.data.code == 416){
            that.open4("删除异常")
            }
        })
      },
        open4(message) {
      //错误提示框
      this.$message({
        showClose: true,
        message: message,
        type: "error",
      });
    },
    open2(message) {
      //成功提示框
      this.$message({
        showClose: true,
        message: message,
        type: "success",
      });
    },
    }
}
</script>

<style scoped>
.comment-table{
    width: 100%;
    border: 1px solid red;
}
.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
}
.box-body>.table {
    margin-bottom: 0;
}
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9;
    
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
  text-align: left;
    border-top: 1px solid #f4f4f4;
    word-break:break-all;
    font-size: 15px;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
    font-size: 15px;
}
td>a{
  color: #2882c5;
  font-size: 15px;
} 
.jp-actionblock {
    min-height: 25px;
    line-height: 25px;
}
.jp-actionitem a {
    font-size: 13px;
    font-weight: 400;
    color: #006505;
}
.jp-actionitem a {
    font-size: 13px;
    font-weight: 400;
    color: #006505;
}
.red-action {
    color: #a00 !important;
}
.jp-actionitem > span{
  cursor: pointer;
}
</style>